<template>
	<view>
		<view class="rule-box">
			<view class="rule-img">
				<image class="" style="width: 40rpx;" mode="widthFix" @click="showAgreement(2)" :src="baseImagePath + 'rule-icon.png'">
				</image>
			</view>
		
			<button class="rule-img-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<!-- @click="gotoQuanyi" -->
				<image class="rule-imgs" mode="widthFix" :src="baseImagePath + 'quanyi-icon.png'">
				</image>
			</button>
			<image class="rule-imgs" mode="widthFix" @click="telMobile" :src="baseImagePath + 'tel-icon.png'"></image>

		

		</view>
		<view v-if="isShowRule" class="rule-content-box">
			<image @click="isShowRule = false" class="rule-img" mode="widthFix" :src="baseImagePath + 'rule.png'">
			</image>
		</view>
	</view>
</template>

<script>
	import mobileApi from '../../api/mobileApi';
	import zfbUrlUtil from '../../utils/zfbUrlUtil';
	export default {
		data() {
			return {
				isShowRule: false,
				mobile: '',
			};
		},
		props: ['baseImagePath'],
		methods: {
			getPhoneNumber(e) {
				console.log('getPhoneNumber', e)

				if (this.mobile) {
					this.gotoQuanyi()
				} else {
					mobileApi.getZfbAuthorizeMobile(e.detail.encryptedData, e.detail.sign, resMobile => {
						this.mobile = resMobile
						this.gotoQuanyi()
					})
				}

			},
			telMobile() {
				uni.makePhoneCall({
					phoneNumber: '4008825010'
				})
			},
			gotoQuanyi() {
				if (this.mobile) {
					let targetUrl = zfbUrlUtil.wrapUrl('http://keep.syhy000.com/keep/five/?mobile=' +this.mobile)
					console.log('gotoQuanyi', targetUrl)
					my.ap.openURL({
						url: targetUrl,
						success: (res) => {
							console.log('openURL success', res)
						},
						fail: (err) => {
							console.log('openURL success', err)
						}
					});
				} else {

					uni.showToast({
						title: '请先点击办理获取手机号',
						icon: 'none', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				}
			},
			showAgreement(value) {
				this.$emit('showAgreement', value)
			}
		}
	}
</script>

<style lang="scss">
	.rule-box {
		position: fixed;
		top: 200rpx;
		right: 0;
		text-align: right;

		.rule-img {
			width: 100%;
			height: auto;
			margin: 0 auto;
			margin-bottom: 35rpx;
			display: block;
			
		
		}
.rule-imgs {
			width: 40rpx;
			height: auto;
			margin-bottom: 35rpx;
			display: block;
		}
		.rule-img-btn {
			background: none;
			padding: 0;
			margin: 0;
			border: none;
			box-shadow: none;
			border-style: none;
		
			height: auto;

			border::after {
				background: none;
				padding: 0;
				margin: 0;
				border: none;
				content: none;
				border-style: none;
			}
		}
	}


	.rule-content-box {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		overflow: auto;
		z-index: 9;

		.rule-img {
			width: 100%;
			height: auto;
		}
	}
</style>